<script setup lang="ts">

import { reactive, ref, watch, computed } from 'vue'
import type { Ref } from 'vue'
import { likeStore } from "@/stores/like/index";
import { showStore } from "@/stores/show/index";

//获取store
const store = likeStore();
//获取like
const status = computed(() => {
    return store.getLike;
});
//改变like
const setLike = (i: any) => {
    store.setLike(!store.getLike)
    if (store.getLike) {
        newList[i].like.push("马斯克")
    } else {
        newList[i].like.splice(-1, 1)
    }
    newList[i].flag = !newList[i].flag
}





const newList = reactive([
    {
        user: { name: "马斯克", avatar: "./people/马斯克.png" },
        contents: "大家好，我是马斯克，特斯拉新车出售，欢迎大家前来购买",
        images: ["./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg",
            "./people/bg.jpg", "./people/马斯克.png", "./people/bg.jpg",
            "./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg"],
        time: "2小时前",
        like: ["马云", "kaen.Bergur", "比尔盖茨"],
        flag: false,
        reply: ["马云:牛逼", "特朗普:nice"]
    },

    {
        user: { name: "特朗普", "avatar": "./people/特朗普.png" },
        contents: "Good job! Biden is low",
        images: ["./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg"],
        time: "1小时前",
        flag: false,
        like: ["马云", "马化腾"],
        reply: ["马云:牛逼", "特朗普:nice"]
    }, {
        user: { name: "比尔盖茨", "avatar": "./people/比尔盖茨.png" },
        contents: "下一个硅谷神话之作",
        images: ["./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg"],
        time: "1小时前",
        flag: false,
        like: ["马化腾"],
        reply: []
    },
    {
        user: { name: "马化腾", "avatar": "./people/马化腾.png" },
        contents: "where is the jack Ma?",
        images: ["./people/bg.jpg", "./people/tx.png", "./people/bg.jpg"],
        time: "10分钟前",
        flag: false,
        like: ["马云", "kaen.Bergur"],
        reply: ["马云:牛逼", "特朗普:nice"]
    }
    ,
    {
        user: { name: "马云", "avatar": "./people/马云.png" },
        contents: "未来探索之星，特斯拉牛逼，马斯克牛逼，期待你的火星移民计划",
        images: ["./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg"],
        time: "10分钟前",
        flag: false,
        like: ["马云"],
        reply: ["马云:牛逼", "特朗普:nice"]
    }
    ,
    {
        user: { name: "贝佐斯", "avatar": "./people/贝佐斯.png" },
        contents: "超越我，称为第一首富，你值得拥有",
        images: ["./people/bg.jpg", "./people/bg.jpg", "./people/bg.jpg"],
        time: "30分钟前",
        flag: false,
        like: ["马云", "贝佐斯", "特朗普"],
        reply: ["马云:牛逼", "特朗普:nice"]
    }
]);


// console.log(newList[0].flag);

let cache: any = []
const btnShow = (i: any) => {
    newList[i].flag = !newList[i].flag
    // 把序号存进数组
    cache.push(i)
    if (cache[0] == cache[1]) {
        cache.splice(0, 2)
    } else if (newList[cache[0]].flag == true && (cache.length == 2)) {
        newList[cache[0]].flag = !newList[cache[0]].flag
        cache.splice(0, 1)
    }
}









// 解决弹窗的僵硬的问题
// const show = ref(true);
// watch(
//     () => flag.value,
//     (value: boolean) => {
//         if (!value) {
//             setTimeout(() => {
//                 show.value = !value;
//             }, 300);
//         } else {
//             show.value = !value;
//         }
//     }
// );


</script>



<template>
    <div class="container" v-for="(item,i) in newList" :key="i">
        <div class="userinfo">
            <img :src="item.user.avatar" alt="">
        </div>
        <div class="newinfo">
            <p>{{item.user.name}}</p>
            <span>{{item.contents}}</span>
            <div class="image">
                <img :src="img" alt="" v-for="img in item.images">
                <div class="footer">
                    <span class="time">{{item.time}}</span>
                    <div class="dialag" v-show="item.flag">
                        <div v-if="status" @click="setLike(i)">
                            <i class="bi bi-heart-fill" style="color: red;"></i>&nbsp;取消
                        </div>
                        <div v-if="!status" @click="setLike(i)"><i class="bi bi-heart"></i>&nbsp;赞</div>|
                        <div><i class="bi bi-chat-square"></i>&nbsp;评论</div>
                    </div>
                    <div class="twodots" @click="btnShow(i)">
                        <i class="bi bi-three-dots"></i>
                    </div>
                </div>
            </div>
            <div class="like">&nbsp;<i class="bi bi-heart"></i>
                <span v-for="name in item.like">&nbsp;{{name}}<span v-if="item.like.length>2">,</span></span>
            </div>
            <div class="comments" v-for="name in item.reply">
                <span>&nbsp;{{name}}</span>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.container {
    display: flex;
    margin-top: 2vh;
    position: relative;
    margin-bottom: 1vh;
    border-bottom: 1px solid #f0f0f0;

    .userinfo {
        position: absolute;
        left: 0;
        width: 50px;
        height: 50px;

        img {
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 6px;
        }
    }

    .newinfo {
        margin-left: 13vw;
        margin-bottom: 2vh;

        p {
            color: #1a73e8;
        }


        .image {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            // display: grid;
            // grid-gap: 5px;
            // grid-template-columns: repeat(3, 80px);
            // grid-template-rows: repeat(3, 80px);

            img {
                width: 100%;
                height: 100%;
                width: 80px;
                height: 80px;
                margin-right: 5px;
                margin-bottom: 5px;

            }

            .footer {
                width: 100%;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;

            }

            .time {

                font-size: 12px;
            }

            .dialag {
                width: 130px;
                float: right;
                height: 30px;
                border-radius: 2px;
                margin-left: 45px;
                // margin-right: 5px;
                background-color: #4c4c4c;
                animation: show 0.6s;
                opacity: 1;
                display: flex;

                div {
                    flex: 1;
                    font-size: 13px;
                    text-align: center;
                    line-height: 30px;
                    color: #fff;

                    .bi:hover {
                        background-color: #1a73e8;
                    }
                }

            }

            .twodots {
                width: 30px;
                height: 18px;
                background-color: #f0f0f0;
                line-height: 18px;
                text-align: center;
                // .bi-three-dots {}
            }

        }

        .like {
            width: 100%;
            background-color: #f7f7f7;
            color: #576b95;
            font-size: 16px;
            border-bottom: 1px solid #f0f0f0;

        }

        .comments {
            width: 100%;
            // height: 20px;
            background-color: #f7f7f7;
            color: #576b95;
            font-size: 16px;
        }
    }


}


@keyframes show {

    0% {
        width: 0;
        transform: translateX(10px);
    }

    50%,
    100% {
        width: 130px;


    }
}
</style>